<template>
    <div class="header-container">
        <div class="header_content">
            <div class="logo">
                <RouterLink :to="{ path: '/' }">
                    <el-image
                        style="width: 229px; height: 60px"
                        :src="logoUrl"
                        fit="fit"
                    ></el-image>
                </RouterLink>
            </div>
            <div class="navi-list">
                <RouterLink
                    :exact="item.exact"
                    v-for="(item, index) in navigateList"
                    :key="index"
                    :to="{ name: item.name }"
                    active-class="selected"
                    exact-active-class=""
                >
                    <span>{{ item.title }}</span>
                </RouterLink>
            </div>
            <div class="right">
                <div class="search">
                    <i class="el-icon-search"></i>
                    <input
                        type="text"
                        v-model="searchStr"
                        placeholder="关键字搜索"
                    />
                </div>
                <div class="login">
                    <RouterLink :to="{ path: '/Login' }">登录 </RouterLink>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            logoUrl: require("@/assets/images/logo.png"),
            navigateList: [
                {
                    index: 0,
                    name: "Mall",
                    title: "云采商城",
                    exact: true,
                },
                {
                    index: 1,
                    name: "Supplier",
                    title: "供应商",
                    exact: true, // 激活状态是否要精确匹配
                },
                {
                    index: 2,
                    name: "SupplyChain",
                    title: "供应链",
                    exact: true,
                },
                {
                    index: 3,
                    name: "ExpertLibrary",
                    title: "专家库",
                    exact: true,
                },
                {
                    index: 4,
                    name: "LaborServicePlatform",
                    title: "劳务平台",
                    exact: true,
                },
                {
                    index: 5,
                    name: "BiddingPlatform",
                    title: "招投标平台",
                    exact: true,
                },
                {
                    index: 6,
                    name: "OnlineShowroom",
                    title: "线上展厅",
                    exact: true,
                },
                {
                    index: 7,
                    name: "CloudShot",
                    title: "云拍",
                    exact: true,
                },
                {
                    index: 8,
                    name: "CarbonPrattWhitney",
                    title: "碳普惠",
                    exact: true,
                },
                {
                    index: 9,
                    name: "Tool",
                    title: "工具",
                    exact: true,
                },
            ],
            searchStr: "",
        };
    },
    mounted() {
        this.$emit("handleItemLength", this.navigateList);
    },
};
</script>

<style scoped lang="less">
@import "~@/assets/css/var.less";
@import "~@/assets/css/mixin.less";
.header-container {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #33363a;
    box-sizing: border-box;
    .header_content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        .logo {
            width: 229px;
            height: 60px;
            flex: 0;
        }
        .navi-list {
            height: 60px;
            flex: 1;
            display: flex;
            justify-content: center;
            align-content: center;

            a {
                height: 58px;
                position: relative;
                color: #e6ecf2;
                font-size: 14px;
                &.selected {
                    font-weight: 600;
                    &.selected::before {
                        content: "";
                        position: absolute;
                        z-index: 99;
                        left: 5px;
                        right: 5px;
                        bottom: 0;
                        background-image: linear-gradient(
                            to right,
                            #198cff,
                            #4bc3ff
                        );
                        height: 2px;
                    }
                }
                margin: 0 5px;
                display: block;
                display: flex;
                align-items: center;
                &::before {
                    content: "";
                    position: absolute;
                    z-index: 99;
                    left: 50%;
                    right: 50%;
                    bottom: 0;
                    background-image: linear-gradient(
                        to right,
                        #198cff,
                        #4bc3ff
                    );
                    height: 2px;
                    -webkit-transition-property: left, right;
                    transition-property: left, right;
                    -webkit-transition-duration: 0.4s;
                    transition-duration: 0.4s;
                    -webkit-transition-timing-function: ease-out;
                    transition-timing-function: ease-out;
                }
                &:hover {
                    font-weight: 600;
                    &::before {
                        left: 12px;
                        right: 12px;
                    }
                }
            }
            @media screen and (min-width: 1365px) {
                a {
                    padding: 0 10px;
                }
            }
            @media screen and (max-width: 1366px) {
                a {
                    padding: 0 5px;
                }
            }
        }

        .right {
            width: 240px;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .search {
                width: 140px;
                height: 30px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                background-color: rgba(0, 0, 0, 0.6);
                box-sizing: border-box;
                padding: 0 10px;
                overflow: hidden;
                i {
                    color: #909399;
                }
                input {
                    background: none;
                    flex: 1;
                    overflow: hidden;
                    border: 0;
                    color: #667280;
                    margin-left: 10px;
                    &:focus {
                        outline: none; // 如何把蓝色去掉？
                        // border: 1px solid #58b195; // 如何改成别的颜色？
                    }
                }
            }
            .login {
                .hollow-btn();
                color: @primary;
                width: 70px;
            }
        }
    }
    @media screen and (min-width: 1365px) {
        .header_content {
            max-width: 1640px;
        }
    }
    @media screen and (max-width: 1366px) {
        .header_content {
            max-width: 1366px;
        }
    }
}
</style>

